<template>
	<view class="box-main">

		<!-- 导航栏 -->
		<view class="box-nav">
			<view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
				<view class="head-menu">
					<view class='iconfont icon-fanhui2' @click="leftClick"></view>
					<view class="iconfont icon-shouye" @click="showNav"></view>
				</view>
				<view class="fw fs-32 mlr " style="margin-right: 43%;">
					<view class="box-title-txt">
						{{ navTitle || '创建名片'}}
					</view>
				</view>
			</view>
		</view>
		<!-- end -->

		<view :style="{height:homeTop+108 + 'rpx'}" style="display: block;"></view>

		<!-- 名片 -->
		<view v-if="cardModel == 1" class="box-bg-img pos-r mb-30">
			<view @click="replacImg()" class="">
				<image class="shadow-1 br-6" style="height: 860rpx;width: 100%;" :src="backgroundStyle"
					mode="aspectFill"></image>
			</view>
			<view @click="replacImg()" class="box-tihuan">
				<text>更换形象照</text>
			</view>
			<view class="box-img-text">
				<view>
					<text class="fw fs-36">{{form.name || '姓名'}} </text>
					<text class="ml-10 mr-10"> / </text>
					<text class="fs-30 "> {{form.company.position || '职位'}}</text>
				</view>
				<view class="mt-10">
					<text class="fs-26">{{form.company.company_name || '公司名称'}}</text>
				</view>
			</view>
		</view>
		<view v-if="cardModel == 0" class="box-bg-img-2 mb-30">
			<view class="box-bg-img-2-left">
				<view class="mb-10 fw box-bg-title" style="font-size: 40rpx;">
					<text>{{form.name || '姓名'}}·{{form.company.position || '职位'}}</text>
				</view>
				<view class="">
					<text class="fs-26" style="color: #FFD7AC;">{{form.company.company_name || '公司名称'}}</text>
				</view>
				<view>
					<view class="mt-40" style="color: white;">
						<text class="iconfont icon-phone_ fs-26"></text>
						<text class="fs-26 ml-10">{{form.phone || '电话'}}</text>
					</view>
					<view class="mt-10" style="color: white;">
						<text class="iconfont icon-weixin1 fs-26"></text>
						<text class="fs-26 ml-10">{{form.wxNumber || '微信号'}}</text>
					</view>
					<view class="mt-10" style="color: white;width: 150%;">
						<text class="iconfont icon-weizhi fs-26"></text>
						<text class="fs-26 ml-10">{{form.company.addrAll || '公司地址'}}</text>
					</view>
				</view>
			</view>
			<view @click="replacImg" class="box-bg-img-2-right pos-r">
				<image mode="aspectFill" v-if="form.avatar" :src="form.avatar"
					style="width: 140rpx;height: 140rpx;border-radius: 100%;">
				</image>
				<view v-else>
					<image mode="aspectFill" src="https://yjgs.jsonbug.com/storage/default/20241017/baixianguobg.png"
						style="width: 140rpx;height: 140rpx;border-radius: 100%;">
					</image>
					<view class="box-img-avator">
						替换头像
					</view>
				</view>
			</view>
		</view>

		<view class="box-select-model mb-30">
			<view @click="selectModel(1)" class="br-12">
				<view>
					<image v-if="cardModel == 1" src="https://yjgs.jsonbug.com/test/bagl-yes1-3.png"
						style="width: 100%;height: 220rpx;"></image>
					<image v-else src="https://yjgs.jsonbug.com/test/bagl-no1-2.png"
						style="width: 100%;height: 220rpx;">
					</image>
				</view>
				<view class="mlr wfc mt-10">
					<text>商务版</text>
				</view>
			</view>
			<view @click="selectModel(0)" class="br-12">
				<view>
					<image v-if="cardModel == 0" src="https://yjgs.jsonbug.com/test/bgr-yes1-3.png"
						style="width: 100%;height: 220rpx;"></image>
					<image v-else src="https://yjgs.jsonbug.com/test/bgr-no1-3.png" style="width: 100%;height: 220rpx;">
					</image>
				</view>
				<view class="mlr wfc mt-10">
					<text>免费版</text>
				</view>
			</view>
		</view>
		<!-- end -->

		<!-- 个人信息 -->
		<view class="box box-info">
			<view>
				<text class="fw fs-38">个人信息</text>
				<text class="box-info-auth" v-if="form.status == 3">审核不通过</text>
				<text v-if="form.status == 1" class="box-info-auth" style="background-color: #1BA035;">已通过</text>
				<text v-if="form.status == 2" class="box-info-auth" style="background-color: #A7ADB1;">审核中...</text>
			</view>
			<view v-if="form.status == 3" class="mt-10 fw" style="color: #999999;">
				原因：{{form.remark || ''}}
			</view>
			<view class="mb-20">
				<view class="mt-50 flex ac sb">
					<view>
						<text class=" c-999 fs-34">姓名</text>
						<text class="must ml-10">*</text>
					</view>
					<view style="width: 80%;">
						<input maxlength="5" :adjust-position='false' class="fs-32 mr-5" style="text-align: right;"
							placeholder-class="placeholder" type="text" v-model="form.name" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="mt-30 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

			<view class="mb-20">
				<view class="mt-20 flex ac sb">
					<view>
						<text class="fs-34 c-999">电话</text>
						<text class="must ml-10">*</text>
					</view>
					<view style="width: 80%;">
						<input maxlength="11" class="fs-32 mr-5" style="text-align: right;"
							placeholder-class="placeholder" type="number" v-model="form.phone" placeholder="请输入电话" />
					</view>
				</view>
				<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

			<view class="mb-20">
				<view @click="toPageCreatePost" class="mt-20 flex ac sb mb-30">
					<view style="width: 220rpx;">
						<text class="fs-34 c-999">公司及职位</text>
						<text class="must ml-10">*</text>
					</view>
					<view style="width: 75%;text-align: right;color: #999;">
						<text class="fs-32">请添加公司及职位</text>
						<text class="iconfont icon-gengduo3 fs-24 ml-5"></text>
					</view>
				</view>
				<view class="mb-20 fs-32">
					<view @click="selectComPany(item,index)" v-for="(item,index) in companyList" :key="index"
						class=" flex ac sb mb-10">
						<view class="w-100p flex ac">
							<view class="w-80p line-1">
								<text class="fs-34 c-999 box-com-txt"
									:class="{'box-com-txt-active':item.select}">{{item.company_name || ''}}</text>
							</view>
							<view>
								<text v-if="item.select" class="iconfont icon-xuanzhong11 ml-20"
									style="font-size: 36rpx;color: #0C1DA4;"></text>
								<text @click.stop="deleteComClick(item,index)" class="iconfont icon-guanbi1 ml-20 fs-36"
									style="color: #999;"></text>
							</view>
						</view>
						<view @click.stop="editComClick(item,index)" style="text-align: right;color: #999;">
							<text class="iconfont icon-jiantou fs-36"></text>
						</view>
					</view>
				</view>
				<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

			<view class="mb-20">
				<view class=" flex ac sb">
					<view>
						<text class=" c-999 fs-34">籍贯</text>
						<text class="must ml-10">*</text>
					</view>
					<view style="width: 80%;">
						<input maxlength="6" :adjust-position='false' class="fs-32 mr-5" style="text-align: right;"
							placeholder-class="placeholder" type="text" v-model="form.old_home" placeholder="请输入籍贯" />
					</view>
				</view>
				<view class="mt-30 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

			<view class="mb-20 fs-32 ">
				<view class="mt-50 flex ac sb">
					<view style="width: 170rpx;">
						<text class="fs-34 c-999">现居城市</text>
						<text class="must ml-10">*</text>
					</view>
					<view style="width: 80%;">
						<input maxlength="8" :adjust-position='false' class="fs-32 mr-5" style="text-align: right;"
							placeholder-class="placeholder" type="text" v-model="form.arecList" placeholder="请输入现居城市" />
					</view>
				</view>
			</view>

			<view class="mb-20">
				<view class="mt-20 flex ac sb">
					<view>
						<text class="fs-34 c-999">微信号</text>
					</view>
					<view style="width: 80%;">
						<input class="fs-32 mr-5" style="text-align: right;" placeholder-class="placeholder" type="text"
							v-model="form.wxNumber" placeholder="请输入微信号，不填写不展示" />
					</view>
				</view>
				<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

			<view class="mb-20 fs-32 ">
				<view @click="maxEduShow=true;" class=" flex ac sb">
					<view class="line-1" style="width: 30%;">
						<text class="fs-34 c-999">最高学历</text>
					</view>
					<view v-if="!form.max_edu" style="text-align: right;color: #999;">
						<text class="fs-32">请选择最高学历</text>
						<text class="iconfont icon-gengduo3 fs-24 ml-5"></text>
					</view>
					<view v-else style="text-align: right;">
						<text class="fs-32">{{form.max_edu || ''}}</text>
					</view>
				</view>

				<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

			<view class="mb-20">
				<view class="mt-20 flex ac sb">
					<view>
						<text class="fs-34 c-999">毕业院校</text>
					</view>
					<view style="width: 80%;">
						<input class="fs-32 mr-5" style="text-align: right;" placeholder-class="placeholder" type="text"
							v-model="form.school" placeholder="请输入毕业院校" />
					</view>
				</view>
				<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

			<view class="mb-20">
				<view class="mt-20 flex ac sb">
					<view>
						<text class="fs-34 c-999">社会职务</text>
					</view>
					<view style="width: 80%;height: 100rpx;">
						<textarea maxlength="80" class="fs-32 mr-5"
							style="width: 100%;height: 100rpx;margin-left: 10rpx;text-align: right;"
							placeholder-class="placeholder" type="text" v-model="form.social_duties"
							placeholder="请输入社会职务" />
					</view>
				</view>
				<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

			<view class="mb-20">
				<view class="mt-20 flex ac sb">
					<view>
						<text class="fs-34 c-999">职业</text>
					</view>
					<view style="width: 80%;">
						<input class="fs-32 mr-5" style="text-align: right;" placeholder-class="placeholder" type="text"
							v-model="form.Occupation" placeholder="请输入职业" />
					</view>
				</view>
				<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

			<view v-if="cardModel == 1" class="mb-20">
				<view class="mt-20 flex ac sb">
					<view>
						<text class="fs-34 c-999">邮箱</text>
					</view>
					<view style="width: 80%;">
						<input class="fs-32 mr-5" style="text-align: right;" placeholder-class="placeholder" type="text"
							v-model="form.email" placeholder="请输入邮箱，不填写不展示" />
					</view>
				</view>
				<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

			<view class="mb-20 fs-32 ">
				<view @click="selectLabel" class=" flex ac sb">
					<view class="line-1" style="width: 60%;">
						<text class="fs-34 c-999">兴趣爱好</text>
					</view>
					<view style="text-align: right;color: #999;">
						<text>请选兴趣爱好</text>
						<text class="iconfont icon-gengduo3 fs-24 ml-5"></text>
					</view>
				</view>
				<view class="flex ww">
					<view @click="deleteSelectLabel(item,index)" class="mt-30 box-item-box mr-15"
						v-for="(item,index) in form.labelList" :key="index">
						<text>{{item || ''}}</text>
						<text class="iconfont icon-guanbi1 ml-10"></text>
					</view>
				</view>
				<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

			<view class="mb-20 fs-32 ">
				<view class=" flex ac ">
					<view class="line-1" style="width: 20%;">
						<text class="fs-34 c-999">实名状态</text>
					</view>
					<!--  -->
					<view v-if="form.isRealAuth == 1" class="ml-20 pos-r" style="top: 5rpx;">
						<image mode="widthFix" style="width: 100rpx;height: 40rpx;"
							src="https://yjgs.jsonbug.com/test/realAuth.png">
						</image>
					</view>
					<view @click="toPage('去实名认证')" v-if="[2, 4].includes(form.isRealAuth)" class="c-999 mla">
						<text class="fs-32">去实名认证</text>
						<text class="iconfont icon-gengduo3 fs-24 ml-5"></text>
					</view>
					<view v-if="form.isRealAuth == 3" class="ml-20 pos-r" style="top: 5rpx;">
						<image mode="widthFix" style="width: 120rpx;height: 40rpx;"
							src="https://yjgs.jsonbug.com/storage/default/20241009/renzheng.png">
						</image>
					</view>
				</view>
				<view v-if="form.isRealAuth == 4" class="mt-20 flex ac ">
					<image mode="widthFix" style="width: 120rpx;height: 40rpx;"
						src="https://yjgs.jsonbug.com/test/realFail.png">
					</image>
					<text v-if="form.real && form.real.content" class="fs-28 c-666">：{{form.real.content}}</text>
				</view>
				<view class="mt-20 mlr" style="height: 2rpx;width: 95%;background-color:#F4F5FA ;"></view>
			</view>

		</view>
		<!-- end -->

		<!-- 个人履历 -->
		<view v-if="false" class="box mt-30">
			<view class="flex ac sb">
				<text class="fw fs-38">个人履历</text>
				<text v-if="cardObj.individual.is_val" @click="toPageEdit('个人信息')" class="iconfont icon-bianji2 "
					style="font-size: 48rpx;color: #999999;"></text>
			</view>
			<view v-if='!cardObj.individual.is_val' @click="toPageEdit('个人信息')" class="box-xuxian flex ac  jc"
				style="color: #999999;">
				<text class="fw ml-10 ">创建个人履历</text>
			</view>
			<view class="mt-20" v-else>
				<view class="fs-32" style="word-wrap: break-word;">
					{{cardObj.individual.content || ''}}
				</view>
				<view @click="$timer.preView(cardObj.individual.img,index)"
					v-for="(item,index) in cardObj.individual.img" :key="index">
					<view class="mt-10 ">
						<image :src="item" style="width: 100%;" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- end -->


		<!-- 企业简介 -->
		<view v-if="cardModel == 1" class="box mt-30">
			<view class="flex ac sb">
				<text class="fw fs-38">企业商城</text>
				<text @click="toPageShop()" class="fs-32 fw" style="color: #00009E;">立即查看</text>
			</view>
		</view>
		<!-- end -->


		<!-- 企业简介 -->
		<view v-if="cardModel == 1" class="box mt-30">
			<view class="flex ac sb">
				<text class="fw fs-38">企业简介</text>
				<text v-if="cardObj.enterprise.is_val" @click="toPageEdit('企业简介')" class="iconfont icon-bianji2 "
					style="font-size: 40rpx;color: #999999;"></text>
			</view>
			<view v-if="!cardObj.enterprise.is_val" @click="toPageEdit('企业简介')" class="box-xuxian flex ac  jc"
				style="color: #999999;">
				<text class="fw ml-10">创建企业简介</text>
			</view>
			<view class="mt-20" v-else>
				<view class="fs-32" style="word-wrap: break-word;">
					{{cardObj.enterprise.content || ''}}
				</view>
				<view @click="$timer.preView(cardObj.enterprise.img,index)"
					v-for="(item,index) in cardObj.enterprise.img" :key="index" class="mt-15">
					<img :src="item" style="width: 100%;" mode="widthFix"></img>
				</view>
			</view>
		</view>
		<!-- end -->


		<!-- 供需发布 -->
		<view v-if="cardModel == 1" class="box mt-30">
			<view class="flex ac sb">
				<text class="fw fs-38">供需发布</text>
				<text v-if="cardObj.demand.is_val" @click="toPageEdit('供需发布')" class="iconfont icon-bianji2 "
					style="font-size: 40rpx;color: #999999;"></text>
			</view>
			<view v-if='!cardObj.demand.is_val ' @click="toPageEdit('供需发布')" class="box-xuxian flex ac  jc"
				style="color: #999999;">
				<text class="fw ml-10">创建供需发布</text>
			</view>
			<view class="mt-20" v-else>
				<view v-if="cardObj.demand.content">
					<text style="font-weight: bold;color: black;font-size: 36rpx;">
						一、我能提供的资源
					</text>
					<view class="mt-10 mb-10"></view>
					<text class="fs-32">
						{{cardObj.demand.content || ''}}
					</text>
				</view>
				<view v-if="cardObj.demand.gainDesc" class="mt-20">
					<text style="font-weight: bold;color: black;font-size: 36rpx;">
						二、我需要的资源
					</text>
					<view class="mt-10 mb-10"></view>
					<text class="fs-32">
						{{cardObj.demand.gainDesc || ''}}
					</text>
				</view>
				<view @click="$timer.preView(cardObj.demand.img,index)" v-for="(item,index) in cardObj.demand.img"
					:key="index" class="mt-15">
					<img :src="item" style="width: 100%;" mode="widthFix"></img>
				</view>
			</view>
		</view>
		<!-- end -->

		<!-- 产品和服务 -->
		<view v-if="cardModel == 1" class="box mt-30">
			<view class="flex ac sb">
				<text class="fw fs-38">产品服务</text>
				<text v-if="cardObj.products.is_val" @click="toPageEdit('产品和服务')" class="iconfont icon-bianji2 "
					style="font-size: 40rpx;color: #999999;"></text>
			</view>
			<view v-if="!cardObj.products.is_val" @click="toPageEdit('产品和服务')" class="box-xuxian flex ac  jc"
				style="color: #999999;">
				<text class="fw ml-10">创建产品服务</text>
			</view>
			<view class="mt-20" v-else>
				<view class="fs-32" style="word-wrap: break-word;">
					{{cardObj.products.content || ''}}
				</view>
				<view @click="$timer.preView(cardObj.products.img,index)" v-for="(item,index) in cardObj.products.img"
					:key="index" class="mt-15">
					<img :src="item" style="width: 100%;" mode="widthFix"></img>
				</view>
			</view>
		</view>
		<!-- end -->

		<!-- 动态资讯 -->
		<view v-if="cardModel == 1" class="box mt-30">
			<view @click.stop="toPageNews" class="flex ac sb">
				<view>
					<text class="fw fs-38">动态资讯</text>
				</view>
				<view class="create_dt shadow-1">+创建动态</view>
			</view>
			<view class="news-list">
				<view class="status-tabs">
					<view v-for="(item, index) in statusList" :key="index" class="status-tab"
						:class="{'status-tab-active': currentStatus === item.value}" @click="changeStatus(item.value)">
						{{item.label}}
					</view>
				</view>
				<uni-swipe-action>
					<uni-swipe-action-item @change="swipeActionChange($event)" :show="item.show"
						v-for="(item, index) in articleList" :key="index" :threshold="60" :right-options="swipeOptions"
						@click="handleSwipeClick($event, item)">
						<view class="news-item" @click="toNewsDetail(item)">
							<view class="news-content">
								<image class="news-cover" :src="$timer.ensureUrl(item.cover)" mode="aspectFill"></image>
								<view class="news-info">
									<view class="news-title">
										<text class="news-status" :class="{
											'status-pass': item.status === 1,
											'status-pending': item.status === 2,
											'status-reject': item.status === 3,
											'status-draft': item.status === 4
										}">{{item.status === 1 ? '已通过' : item.status === 2 ? '待审核' : item.status === 4 ? '暂存' : '未通过'}}</text>
										{{item.title || ''}}
									</view>
									<view class="news-footer">
										<view class="news-label">{{item.label || ''}}</view>
										<view class="news-time">{{item.create_time || ''}}</view>
									</view>
									<view v-if="item.status == 3" class="c-red fs-24 mt-10">驳回原因：{{item.remark || ''}}
									</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
				<emptyPage v-if="articleList.length == 0" :top="0" title="暂无数据"
					style="margin-top: 10rpx;margin-bottom: 20rpx;">
				</emptyPage>
			</view>
			<!-- 加载更多 -->
			<uni-load-more v-if="articleList.length > 0" :status="status" />
			<!-- end -->
		</view>
		<!-- end -->


		<view style="height:220rpx;"></view>

		<!-- 名片设计 -->
		<movable-area v-if="cardModel == 1" class="movable-area">
			<movable-view class="movable-view" direction="vertical" :x="0" :y="600" :animation="false">
				<view @click="toCreateMpPage" class="box-create shadow-2" style="z-index: 9;">
					<text class="fw">名片设计</text>
					<text class="iconfont icon-VIP2 ml-5 box-vip-text"></text>
				</view>
			</movable-view>
		</movable-area>
		<!-- end -->


		<!-- 页脚 -->
		<view class="box-footer shadow-2 flex ac ">
			<view @click="preViewCardClick" class="flex ac jc fc  c-000 w-180">
				<image style="height: 48rpx;width: 48rpx;" src="https://yjgs.jsonbug.com/test/previewcard.png"
					mode="aspectFill"></image>
				<text class="fs-26 mt-10">预览名片</text>
			</view>
			<view class="w-100p pos-r">
				<view @click="sumbit()" class="box-f-btn mt-5 w-100p">
					发布/审核
				</view>
				<!-- <view class="pos-a" style="bottom: -40rpx;">
					<text class="c-333 fs-26">tips:请预览名片无误后在发布哦~~</text>
				</view> -->
			</view>
		</view>
		<view v-if="cardModel == 1 && is_card != 1" class="box-footer shadow-2">
			<navigator url="/pages/extend/user_vip/user_vip" hover-class="none">
				<view class="box-f-btn mt-5 box-f-btn-plus mlr">
					<text class="mr-5 box-vip-text">开通会员</text>
					<text class=" box-vip-text">￥</text>
					<text class=" box-vip-text" style="font-size: 40rpx;">365</text>
					<text class="box-vip-text">/年</text>
				</view>
			</navigator>
		</view>
		<view v-if="isVerif || form.status == 2" class="box-footer shadow-2">
			<view class="box-f-btn mt-5 mlr" style="background-color: #999;">
				审核中...
			</view>
		</view>
		<!-- end -->


		<!-- 标签 -->
		<uni-popup borderRadius='20px 20px 20px 20px' ref="popupLabel" background-color="#fff">
			<view class="popup-content bb">
				<view class="box-popupLabel p-20 tc  pos-r">
					<text class="fw fs-34">选择标签</text>
					<text @click="closeLabelPoup" class="iconfont icon-guanbi1 pos-a"
						style="right: 10rpx;font-size: 50rpx;"></text>
				</view>
				<scroll-view scroll-y style="height: 62vh;">
					<view v-for="(item,index) in labelList" :key="item.id">
						<view class="p-20">
							<text style="color: #999;">{{item.name}}</text>
						</view>
						<view class=" box-item-boxs">
							<view @click="selectInterest(obj,_i)" v-for="(obj,_i) in item.label" :key="obj.id"
								class="box-item" :class="obj.select ? 'box-item-active' : 'box-item'">
								{{obj.name}}
							</view>
						</view>
					</view>
					<view style="height: 60rpx;"></view>
					<view @click="closeLabelPoup" class="box-label-pop-btn">
						<text>确定</text>
						<text>({{form.labelList.length || 0}}/10)</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- end -->


		<!-- 地址选择器 -->
		<UniAddressSelector :selectAreaLevelLimit='2' v-if="showUniAddressSelector" :areaInfoSelected="areaInfoObj"
			@cancel="handleCancel" @confirm="handleConfirm">
		</UniAddressSelector>
		<!-- end -->


		<!-- 支付弹窗 -->
		<payment :payMode="payMode" :pay_close="pay_close" :is-call="true" @onChangeFun="onChangeFun"
			:order_id="pay_order_id" :totalPrice="totalPrice"></payment>
		<!-- end -->

		<!-- 最高学历选择 -->
		<u-picker @confirm='maxEduConfim' @cancel='maxEduShow=false;' @close='maxEduShow=false' :show="maxEduShow"
			:columns="maxEduList"></u-picker>
		<!-- end -->



	</view>
</template>

<script>
	import emptyPage from '@/pages/extend/components/emptyPage.vue';
	import payment from '@/pages/extend/components/payment';
	import {
		USER_INFO
	} from '@/config/cache.js';
	import Cache from '@/utils/cache.js';
	import {
		cardPositionList,
		cardPositionDelete,
		otherLabel,
		cardCreate,
		cardDetail,
		cardUpdate,
		cardWechatPay,
		cardUserGetCardStatus,
		UserArticleGetList,
		UserArticleDelete
	} from '@/api/extend.js'
	import UniAddressSelector from '@/pages/extend/components/LukeUniappAddressSelector/components/UniAddressSelector.vue'
	export default {
		components: {
			emptyPage,
			UniAddressSelector,
			payment,
		},
		data() {
			return {
				position_id: 0,
				mer_id: 0,
				status: 'loading', // more loading noMore
				articleList: [],
				page: {
					current_page: 1,
					total: 16
				},
				homeTop: 88,
				navTitle: '创建名片',
				mode: 1, // 1创建 2编辑
				maxEduShow: false,
				maxEduList: [
					['小学', '初中', '高中', '中专', '大专', '本科', '硕士', '博士']
				],
				totalPrice: '365',
				pay_order_id: '888',
				pay_close: false,
				payMode: [{
						name: '微信支付',
						icon: 'icon-weixinzhifu',
						// #ifdef H5
						value: this.$wechat.isWeixin() ? 'weixin' : 'h5',
						// #endif
						// #ifdef MP
						value: 'routine',
						// #endif
						// #ifdef APP-PLUS
						value: 'weixin',
						// #endif
						title: '微信快捷支付',
						payStatus: true
					}
					// #ifdef H5 ||APP-PLUS
					,
					{
						name: '支付宝支付',
						icon: 'icon-zhifubao',
						// #ifdef H5 || APP-PLUS
						value: 'alipay',
						// #endif
						// #ifdef MP
						value: 'alipayQr',
						// #endif
						title: '支付宝支付',
						payStatus: true
					}
					// #endif
				],
				is_card: -1, //是否开通了vip
				isVerif: false,
				companyList: [],
				cardModel: 1, // 0简约版 1商务版
				areaInfoObj: {
					provinceObj: {
						areaCode: '',
						areaName: '',
					},
					cityObj: {
						areaCode: '',
						areaName: '',
					},
					cityObj: {
						areaCode: '',
						areaName: '',
					},
					areaObj: {
						areaCode: '',
						areaName: '',
					},
					streetObj: {
						areaCode: '',
						areaName: '',
					},
				},
				showUniAddressSelector: false,
				labelList: [],
				options: {},
				form: {
					isRealAuth: 2, // 是否实名认证 1已认证 2未认证 3审核中 4审核失败
					Occupation: '', // 职业
					max_edu: '', // 最高学历
					social_duties: '', //社会职务
					old_home: '', // 籍贯
					status: '',
					id: '', //编辑时候的ID
					school: '',
					email: '',
					avatar: '',
					name: '',
					phone: '',
					wxNumber: '',
					labelList: [], //
					arecList: '',
					company: {
						address: '',
						address_detail: '',
						company_name: '',
						position: ''
					},
					real: {
						content: ''
					}
				},
				swipeOptions: [{
					text: '编辑',
					style: {
						backgroundColor: '#007aff',
						color: '#FFFFFF',
						fontSize: '28rpx'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
						color: '#FFFFFF',
						fontSize: '28rpx'
					}
				}],
				homeTop: 88,
				statusList: [{
						label: '全部',
						value: 0
					},
					{
						label: '已通过',
						value: 1
					},
					{
						label: '待审核',
						value: 2
					},
					{
						label: '未通过',
						value: 3
					},
					{
						label: '暂存',
						value: 4
					}
				],
				currentStatus: 0
			}
		},
		computed: {
			uid() {
				return this.$store.state.app.uid
			},
			cardObj() {
				return this.$store.state.extend.cardObj;
			},
			backgroundStyle() {
				const defaultAvatar = 'https://yjgs.jsonbug.com/storage/default/20241017/baixianguobg.png';
				const avatarUrl = this.form.avatar ? this.form.avatar : defaultAvatar;
				return avatarUrl;
			}
		},
		onReachBottom() {
			if (this.status == 'noMore') return;
			this.page.current_page++;
			this.UserArticleGetListFunc();
		},
		onShow() {
			this.articleList = [];
			this.page.current_page = 1;
			this.UserArticleGetListFunc();
		},
		onLoad(options) {
			uni.$on('loginTrigger', () => { // 登录后操作
				this.verifyCardIsExpire();
			})
			uni.$on('vip_open', () => { // 开通vip
				this.verifyCardIsExpire();
			})
			this.verifyCardIsExpire();
			this.cardDetailFunc();
			this.options = options;
			this.cardPositionListFunc();
			this.otherLabelFunc();
			uni.$on('createPostSubmit', () => {
				this.cardPositionListFunc();
			})
			uni.$on('useAuth', () => { // 提交实名认证
				this.form.isRealAuth = 3
			})
		},
		onHide() {
			if (this.mode == 1) {
				uni.setStorageSync('temporarily_my_card', this.form)
				uni.setStorageSync('temporarily_my_card_other', this.cardObj)
			}
		},
		watch: {
			labelList(newVal, oldVal) {
				if (this.form.labelList) {
					this.labelList.forEach(obj => {
						obj.label.forEach((item, index, arr) => {
							if (this.form.labelList.includes(item.name)) {
								arr[index]['select'] = true
							} else {
								arr[index]['select'] = false
							}
						})
					})
				}
			}
		},
		onReady() {
			this.$nextTick(function() {
				// #ifdef MP
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#home')
					.boundingClientRect(data => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
					})
					.exec();
				// #endif
			});
		},
		methods: {
			toPageShop() {
				uni.navigateTo({
					url: '/pages/extend/connection/create_shop?mid=' + this.mer_id
				})
			},
			swipeActionChange(e) {
				// 标记用户已经知道可以侧滑删除了
				uni.setStorageSync('singNews', true);
			},
			UserArticleGetListFunc() {
				this.status == 'loading';
				UserArticleGetList({
					uid: this.uid,
					status: this.currentStatus,
					limit: 12,
					page: this.page.current_page
				}).then(res => {

					let singNews = uni.getStorageSync('singNews') || false;
					let data = res.data.data.map((item, index) => {
						let obj = {
							show: 'right',
							...item,
							create_time: uni.$u.timeFormat(item.create_time, 'yyyy-mm-dd'),
						}
						// if (index == 0 && !singNews) {
						// 	obj.show = 'right'
						// }
						return obj;
					});

					if (data.length < 12) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}

					this.articleList = [...this.articleList, ...data];

					this.page = {
						current_page: res.data.current_page,
						total: res.data.total
					}

				})
			},
			toPageNews() {
				uni.navigateTo({
					url: '/pages/extend/connection/create_news'
				})
			},
			// 首页
			showNav() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			leftClick() {
				if (this.mode == 1) {
					uni.setStorageSync('temporarily_my_card', this.form)
					uni.setStorageSync('temporarily_my_card_other', this.cardObj)
				}

				uni.navigateBack({
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			},
			toPage(tag) {
				if (tag == '去实名认证') {
					uni.navigateTo({
						url: '/pages/extend/user/useAuth'
					})
					return;
				}
			},
			maxEduConfim(e) {
				this.form.max_edu = e.value[0];
				this.maxEduShow = false;
			},
			// 预览名片
			preViewCardClick() {
				if (!this.form.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					})
					return
				}
				if (!this.form.avatar) {
					uni.showToast({
						title: '请选择头像',
						icon: 'none'
					})
					return
				}

				if (this.companyList.length == 0) {
					uni.showToast({
						title: '请添加公司及职位信息',
						icon: 'none'
					})
					return
				}

				if (!this.form.old_home) {
					uni.showToast({
						title: '请输入籍贯',
						icon: 'none'
					})
					return
				}

				if (!this.form.arecList) {
					uni.showToast({
						title: '请选择现居城市',
						icon: 'none'
					})
					return
				}
				this.form.type = this.cardModel == 0 ? 1 : 2;
				uni.setStorageSync('temporarily_my_card', this.form)
				uni.setStorageSync('temporarily_my_card_other', this.cardObj)
				uni.navigateTo({
					url: '/pages/extend/connection/index_desc?mode=preview'
				})
			},
			/**
			 * 判断一下会员是否过期
			 */
			verifyCardIsExpire() {
				let _this = this;
				let data = uni.getStorageSync('cardExpireTime');
				if (data) {
					if (data.is_card == 1) { // 判断一下是否过期了
						let cruurenTime = this.$timer.formatTime(Date.now(), 'yyyy-mm-dd hh:MM:ss');
						let isExpired = this.$timer.isMembershipExpired(cruurenTime, data.card_endtime);
						if (isExpired) {
							_this.cardStatusFunc();
							return;
						}
						_this.is_card = data.is_card;
					} else {
						_this.cardStatusFunc();
					}
				} else {
					_this.cardStatusFunc();
				}
			},
			cardStatusFunc() {
				cardUserGetCardStatus().then(res => {
					if (res.status == 200 && res.data) {
						uni.setStorageSync('cardExpireTime', res.data);
						this.is_card = res.data.is_card;
					}
				})
			},
			payClick() {
				this.pay_close = true;
			},
			onChangeFun: function(e) {
				// #ifdef MP
				uni.showLoading({
					title: '正在加载…'
				});
				cardWechatPay({
					pay_type: e.value
				}).then(res => {
					let _this = this;
					if (res.status == 200) {
						let jsConfig = res.data.result.config;
						jsConfig.timeStamp = jsConfig.timestamp;
						let mp_pay_name = '';
						if (uni.requestOrderPayment) {
							mp_pay_name = 'requestOrderPayment'
						} else {
							mp_pay_name = 'requestPayment'
						}
						uni[mp_pay_name]({
							...jsConfig,
							success: function(res) {
								uni.hideLoading();
								_this.pay_close = false;
								uni.showToast({
									title: '恭喜你成功开通商务版名片功能！',
									icon: 'none',
									duration: 4000
								});
								_this.is_card = 1;
							},
							fail: function(e) {
								uni.hideLoading();
								_this.pay_close = false;
								return _this.$util.Tips({
									title: '取消支付'
								});
							},
						})
					} else {
						uni.showToast({
							title: res.message || '支付失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					this.pay_close = false;
					uni.hideLoading();
					uni.showModal({
						content: "支付失败",
						showCancel: false,
						success: function(res) {}
					})
				})
				// #endif
			},
			cardDetailFunc(obj) {
				cardDetail(obj).then(res => {

					if (res.status == 200 && !this.$timer.isEmpty(res.data)) {
						this.mode = 2;
						this.navTitle = '编辑名片'
						let data = res.data;
						this.position_id = data.position_id;
						this.mer_id = res.mer_id
						this.form.id = data.id;
						this.form.isRealAuth = data.is_real;
						this.form.status = data.status;
						this.form.school = data.school;
						this.form.name = data.name;
						this.form.phone = data.phone;
						this.form.wxNumber = data.wechat;
						this.form.avatar = data.avatar;
						this.form.email = data.email;
						this.form.remark = data.remark;
						this.form.labelList = data.label ? data.label.split(',') : [];
						this.form.arecList = data.resident_address;
						this.form.Occupation = data.Occupation;
						this.form.max_edu = data.max_edu;
						this.form.social_duties = data.social_duties;
						this.form.old_home = data.old_home;
						this.form.real = data.real

						// 扩展参数 预览的时候需要
						this.form.follow_num = data.follow_num;
						this.form.is_real = data.is_real;
						this.form.is_share = data.is_share;
						this.form.pv = data.pv;
						this.form.qr = data.qr;
						this.form.type = data.type;
						this.form.user_image = data.user_image;
						this.form.user_info = data.user_info;
						this.form.wechat = data.wechat;
						this.form.uid = data.uid;
						this.form.collect = data.collect || 2;

						let obj = {
							individual: {
								content: data.user_info,
								img: data.user_image ? data.user_image.split(',') : [],
								is_val: (data.user_info || data.user_image) ? true : false,
							},
							enterprise: {
								content: data.company_info,
								img: data.company_image ? data.company_image.split(',') : [],
								is_val: (data.company_info || data.company_image) ? true : false // 是否有值
							}, // 企业简介
							products: {
								content: data.product_service,
								img: data.product_service_image ? data.product_service_image.split(',') : [],
								is_val: (data.product_service || data.product_service_image) ? true :
									false // 是否有值
							}, // 产品服务
							demand: {
								content: data.supply,
								gainDesc: data.demand,
								img: data.supply_demand_image ? data.supply_demand_image.split(',') : [],
								is_val: (data.supply || data.demand || data.supply_demand_image) ? true :
									false // 是否有值
							}, // 供需发布
						}
						this.$store.commit("SET_CardObj", obj);
					} else { // 读取缓存数据
						let data = uni.getStorageSync('temporarily_my_card');
						let carData = uni.getStorageSync('temporarily_my_card_other');
						if (data) {
							this.form = data;
						}
						if (carData) {
							this.$store.commit("SET_CardObj", carData);
						}
					}

				})
			},
			replacImg() {
				this.$util.uploadImageOne('upload/image', (res) => {
					if (res.status == 200) {
						this.form.avatar = res.data.path
					} else {
						uni.showToast({
							title: '上传更多',
							icon: 'none'
						})
					}
				})
			},
			otherLabelFunc() {
				otherLabel({
					type: 3
				}).then(res => {
					this.labelList = res.data;
				})
			},
			deleteComClick(item, idnex) {
				let _this = this;

				if (this.companyList.length == 1) {
					uni.showToast({
						title: '至少保留一个公司职位',
						icon: 'none'
					})
					return;
				}

				uni.showModal({
					title: `确定要删除【${item.company_name}】吗？`,
					success(_res) {
						if(_res.cancel) return;
						cardPositionDelete({
							id: item.id
						}).then(res => {
							if (res.status == 200) {
								_this.cardPositionListFunc();
							}
							uni.showToast({
								title: res.message,
								icon: 'none'
							})

						}).catch(err => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						})
					}
				})
			},
			editComClick(item, index) {
				uni.navigateTo({
					url: '/pages/extend/connection/create_post?id=' + item.id
				})
			},
			selectComPany(item) {
				this.companyList.forEach((item, index, arr) => {
					arr[index]['select'] = false;
				})
				item.select = !item.select;
				this.form.company = item
				this.form.company.addrAll = item.address + item.address_detail;
			},
			cardPositionListFunc() {
				cardPositionList().then(res => {
					this.companyList = res.data.map((item, index) => {
						let obj = {
							...item,
							select: false
						}
						if (index == 0) {
							obj.select = true;
						}
						return obj;
					});

					setTimeout(() => {
						if (this.position_id) {
							let _item = this.companyList.find(item => item.id == this.position_id);
							this.selectComPany(_item)
						}
					}, 500)

					if (Array.isArray(this.companyList) && this.companyList.length > 0) {
						this.form.company = this.companyList[0];
						this.form.company.addrAll = this.form.company.address + this.form.company.address_detail
					} else {
						this.form.company = {
							address: '',
							address_detail: '',
							company_name: '',
							position: '',
						}
					}
				})
			},
			sumbit() {
				if (!this.form.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					})
					return
				}
				if (!this.form.avatar) {
					uni.showToast({
						title: '请选择头像',
						icon: 'none'
					})
					return
				}

				if (this.companyList.length == 0) {
					uni.showToast({
						title: '请添加公司及职位信息',
						icon: 'none'
					})
					return
				}

				if (!this.form.old_home) {
					uni.showToast({
						title: '请输入籍贯',
						icon: 'none'
					})
					return
				}

				if (!this.form.arecList) {
					uni.showToast({
						title: '请选择现居城市',
						icon: 'none'
					})
					return
				}


				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				cardCreate({
					id: this.form.id,
					type: this.cardModel == 0 ? 1 : 2,
					name: this.form.name,
					email: this.form.email,
					phone: this.form.phone,
					wechat: this.form.wxNumber,
					avatar: this.form.avatar,
					label: this.form.labelList.join(','),
					resident_address: this.form.arecList,
					user_info: this.cardObj.individual.content,
					user_image: this.cardObj.individual.img ? this.cardObj.individual.img.join(',') : '',
					company_info: this.cardObj.enterprise.content,
					company_image: this.cardObj.enterprise.img ? this.cardObj.enterprise.img.join(',') : '',
					product_service: this.cardObj.products.content,
					product_service_image: this.cardObj.products.img ? this.cardObj.products.img.join(',') : '',
					supply: this.cardObj.demand.content,
					demand: this.cardObj.demand.gainDesc,
					supply_demand_image: this.cardObj.demand.img ?
						this.cardObj.demand.img.join(',') : '',
					position_id: this.form.company.id,
					school: this.form.school,
					Occupation: this.form.Occupation,
					max_edu: this.form.max_edu,
					social_duties: this.form.social_duties,
					old_home: this.form.old_home,

				}).then(res => {
					uni.hideLoading();
					this.mode = 2;
					this.isVerif = true;
					this.form.status = 2;
					uni.removeStorageSync('myCardInfo')
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 4000
					});

					setTimeout(() => {
						uni.navigateBack();
					}, 1500)

				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 4000
					});
				})
			},
			toCreateMpPage() {
				uni.navigateTo({
					url: '/pages/extend/service/service_case?category_id=7'
				})
			},
			selectModel(index) {
				this.cardModel = index;
			},
			deleteSelectLabel(item, index) {
				this.form.labelList.splice(index, 1)
			},
			selectInterest(item, index) {
				if (item.select) {
					item.select = false;
					let _index = this.form.labelList.findIndex(obj => obj == item.name);
					if (_index >= 0) {
						this.form.labelList.splice(_index, 1)
					}
				} else {
					if (this.form.labelList.length < 10) {
						item.select = true;
						this.form.labelList.push(item.name)
					} else {
						uni.showToast({
							title: '最多只能选择10个标签',
							icon: 'none'
						})
					}
				}
			},

			handleCancel() {
				this.showUniAddressSelector = false;
			},
			handleConfirm(areaInfoObj) {
				this.showUniAddressSelector = false;
				this.areaInfoObj = areaInfoObj;
				this.form.arecList = areaInfoObj.fullAreaTextInitial;
			},
			selectAddr() {
				this.showUniAddressSelector = true;
			},
			toPageEdit(tag) {
				uni.navigateTo({
					url: `/pages/extend/connection/edit?type=${this.cardModel == 1 ? 'fee' : 'free'}&mode=${tag == '供需发布' ? 4 : '0'}&page=${tag}`
				})
			},
			closeLabelPoup() {
				this.$refs.popupLabel.close();
			},

			selectLabel() {
				this.$refs.popupLabel.open('bottom')
			},
			toPageCreatePost() {
				uni.navigateTo({
					url: '/pages/extend/connection/create_post'
				})
			},
			toNewsDetail(item) {
				if (item.wx_url) {
					wx.openOfficialAccountArticle({
						url: item.wx_url, // 此处填写公众号文章连接
						success: res => {},
						fail: res => {}
					})
				} else {
					uni.navigateTo({
						url: '/pages/extend/connection/new_desc?id=' + item.id
					})
				}
			},
			handleSwipeClick(e, item) {
				if (e.index === 0) {
					// 编辑操作
					uni.navigateTo({
						url: `/pages/extend/connection/create_news?id=${item.id}`
					})
				} else if (e.index === 1) {
					// 删除操作
					uni.showModal({
						title: '提示',
						content: '确定要删除这条新闻吗？',
						success: (res) => {
							if (res.confirm) {
								UserArticleDelete({
									id: item.id
								}).then(row => {
									this.page.current_page = 1;
									this.articleList = [];
									this.UserArticleGetListFunc();
								}).catch(err => {
									uni.showToast({
										title: err,
										icon: 'none'
									})
								})
							}
						}
					})
				}
			},
			changeStatus(status) {
				this.currentStatus = status;
				this.$set(this, 'articleList', [])
				this.page.current_page = 1;
				this.UserArticleGetListFunc();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.create_dt {
		line-height: 60rpx;
		font-size: 26rpx;
		width: 160rpx;
		height: 60rpx;
		border-radius: 100rpx;
		text-align: center;
		color: white;
		background-color: #00009E;
	}

	.box-title-txt {
		box-sizing: border-box;
	}

	.head-menu {
		display: flex;
		align-items: center;
		height: 58rpx;
		width: 158rpx;
		background: rgba(255, 255, 255, 0.302);
		border: 2rpx solid rgba(0, 0, 0, 0.0588);
		border-radius: 29rpx;

		.iconfont {
			flex: 1;
			text-align: center;
			color: #000000;
			box-sizing: border-box;

			&.icon-fanhui2 {
				border-right: 1px solid rgba(0, 0, 0, 0.2);
				;
			}
		}
	}

	.head-wrapper {
		width: 100%;
		z-index: 999;
		display: flex;
		align-items: center;
		position: fixed;
		left: 30rpx;
		top: 0;
	}

	.box-nav {
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: white;
		height: 200rpx;
	}

	.box-img-avator {
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		position: absolute;
		width: 140rpx;
		height: 140rpx;
		border-radius: 100%;
		top: 0rpx;
		left: 0rpx;
		background-color: rgba(40, 44, 53, .5);
	}

	.box-com-txt {
		color: #1C2025
	}

	.box-com-txt-active {
		color: #0B20A0;
		font-weight: bold;
	}

	.box-vip-text {
		font-weight: bold;
		background: linear-gradient(to right, #F3EAD9, #FFFDFF, #E1F2FC, #C5C4FE);
		/* 将背景剪切到文字上 */
		-webkit-background-clip: text;
		background-clip: text;
		/* 将文字颜色设置为透明，以便显示渐变色 */
		-webkit-text-fill-color: transparent;
	}

	.box-create {
		font-size: 28rpx;
		text-align: center;
		line-height: 60rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		width: 240rpx;
		height: 60rpx;
		background-color: #14191F;
		color: white;
	}

	.box-label-pop-btn {
		line-height: 90rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 20rpx;
		border-radius: 6rpx;
		width: 96%;
		margin-left: 50%;
		transform: translateX(-50%);
		height: 90rpx;
		background-color: #00009E;
		color: white;
		font-weight: bold;
		text-align: center;
		font-size: 32rpx;
	}

	.box-label-pop-btn:active {
		opacity: .5;
	}

	.box-item {
		width: 100%;
		height: 85rpx;
		line-height: 85rpx;
		background-color: #F4F5FA;
		text-align: center;
		border-radius: 6rpx;
		color: #333333;
	}

	.box-item-active {
		background-color: #EEEEFF;
		color: #00009E;
	}

	.box-item-boxs {
		padding: 20rpx;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 20rpx;
	}

	.popup-content {
		height: 70vh;
		border-radius: 20rpx;
	}

	.box-popupLabel {
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.box-select-model {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
	}

	.box-tihuan:active {
		opacity: .5;
	}

	.box-tihuan {
		font-size: 28rpx;
		top: 30rpx;
		position: absolute;
		right: 20rpx;
		width: fit-content;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		background-color: #1C2025;
		color: white;
	}

	.box-img-text {
		padding-left: 30rpx;
		padding-bottom: 30rpx;
		border-bottom-left-radius: 18rpx;
		border-bottom-right-radius: 18rpx;
		color: white;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
	}

	.box-bg-img {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		// https://img0.baidu.com/it/u=3442683517,1894173152&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800
		height: 860rpx;
		background-size: 100% 100%;
		border-radius: 18rpx;
	}

	.box-bg-title {
		background: linear-gradient(to bottom, #CF9B62, #FFFFFF);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.box-bg-img-2-right {
		margin-left: auto;
		margin-right: auto;
	}

	.box-bg-img-2-left {
		padding: 40rpx;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		width: 70%;
		height: 100%;
	}

	.box-bg-img-2 {
		display: flex;
		align-items: center;
		background-color: #282C35;
		width: 100%;
		height: auto;
		border-radius: 20rpx;
		background-image: url('https://yjgs.jsonbug.com/test/bag1.png');
		background-size: 100% 100%;
	}

	.box-f-btn:active {
		opacity: .5;
	}

	.box-f-btn {

		font-size: 32rpx;
		border-radius: 8rpx;
		font-weight: bold;
		text-align: center;
		line-height: 90rpx;
		height: 90rpx;
		width: calc(100% - 40rpx);
		background-color: #00009E;
	}

	.box-f-btn-plus {
		background-color: #14191F;
	}

	.box-footer {
		z-index: 99;
		padding: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		color: white;
		background-color: white;
		width: 100%;
		// height: 120rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx); ///兼容 IOS>11.2/
		height: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.movable-area {
		position: fixed;
		width: 240rpx;
		height: 60vh;
		right: 0;
		bottom: 255rpx;
		z-index: 100;
		pointer-events: none;
	}

	.movable-view {
		width: 240rpx;
		pointer-events: auto;
	}

	.box-xuxian {
		border-radius: 20rpx;
		margin-top: 30rpx;
		height: 360rpx;
		width: 100%;
		border: 1rpx dashed #BBBBBB;
	}

	.box-item-box {
		background-color: #EEEEFF;
		width: fit-content;
		padding-left: 30rpx;
		padding-right: 20rpx;
		padding-top: 6rpx;
		padding-bottom: 6rpx;
		color: #0C1FA2;
		border-radius: 60rpx;
	}

	.placeholder {
		font-size: 28rpx;
	}

	.must {
		color: red;
		font-weight: bold;
	}

	.box-info-auth {
		border-radius: 4rpx;
		margin-left: 10rpx;
		font-size: 24rpx;
		font-weight: bold;
		padding-left: 10rpx;
		padding-right: 10rpx;
		background-color: red;
		color: white;
	}

	.box {
		border-radius: 18rpx;
		box-sizing: border-box;
		padding: 20rpx;
		width: 100%;
		background-color: #FFFFFF;
	}

	.box-info {}

	.box-main {
		height: 100vh;
		background-color: #F1F2F7;
		padding: 20rpx;
	}

	.news-list {
		margin-top: 30rpx;
	}

	.news-item {
		margin-bottom: 20rpx;
	}

	.news-content {
		display: flex;
		gap: 20rpx;
	}

	.news-cover {
		width: 200rpx;
		height: 150rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.news-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.news-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.news-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.4;
		margin-top: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.news-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.news-label {
		font-size: 24rpx;
		color: #2965FF;
		background-color: rgba(41, 101, 255, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
	}

	.news-time {
		font-size: 24rpx;
		color: #999;
	}

	.news-status {
		display: inline-block;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 6rpx;
		font-weight: normal;

		&.status-pass {
			color: #1BA035;
			background-color: rgba(27, 160, 53, 0.1);
		}

		&.status-pending {
			color: #A7ADB1;
			background-color: rgba(167, 173, 177, 0.1);
		}

		&.status-reject {
			color: #FF0000;
			background-color: rgba(255, 0, 0, 0.1);
		}

		&.status-draft {
			color: #FBC118;
			background-color: rgba(251, 193, 24, 0.1);
		}
	}

	/* 侧滑按钮样式 */
	::v-deep .uni-swipe-action__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.status-tabs {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.status-tab {
		padding: 10rpx 20rpx;
		border: 1rpx solid #BBBBBB;
		border-radius: 6rpx;
		font-size: 28rpx;
		color: #333;
		cursor: pointer;

		&.status-tab-active {
			background-color: #00009E;
			color: white;
		}
	}
</style>